<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/login.css"/>
		<script src="html5plus://ready"></script>
	</head>
	<body  class="bgcolors">
		<div id="app">
			<header>
				<van-nav-bar
					left-arrow
					left-text="返回" 
					right-text="帮助" 
					@click-left="onClickLeft" 
					@click-right="onClickRight">
				</van-nav-bar>
			</header>
			<section  class="padding">
				<van-row>
					<van-col span="24" class="centers marginTop marginBottom"><img style="width: 35%;" src="../../img/tx.jpg"/></van-col>
				  	<van-col span="24" class="centers marginTop marginBottom">
				  		<van-field
						    v-model.lazy="phone"
						    label="手机号"
						    placeholder="请输入手机号"
						    :error-message="msg"/>
				  	</van-col>
				  	<van-col span="24" class="centers marginBottom">
						<van-field
							v-model.lazy="pwd"
							right-icon="eye-o"
							:type="password"
							label="密码"
							placeholder="请输入密码"
							:error-message="pwd1"
							@click-right-icon="shows"
						  /></van-field>
				  	</van-col> 
				  	<van-col span="8" class="centers">
					    <a href="#" @click="register" >立即注册</a>
				  	</van-col>
				  	<van-col span="8" offset="8" class="centers">
					    <a href="#" @click="forget" >忘记密码？</a>
				  	</van-col>
				  	<van-col span="24" class="centers marginTop">
					    <van-button type="primary" size="large" @click="btn">登录</van-button>
				  	</van-col>
				</van-row>
			</section>
		</div>
		<script src="../../js/vue.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../js/vant.min.js" ></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tuichu.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					password:"password",
					phone:"",
					msg:"",
					pwd:"",
					pwd1:""
				},
				methods:{
					shows:function(){
						this.password = this.password === 'password' ? 'text' : 'password';
					},
				    onClickLeft:function() {
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				    },
				    onClickRight:function() {
				      this.$toast("帮助");
				    },
				    register:function(){
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				    	var login=plus.webview.open("register.html","register",{
							zindex:0,
							scrollIndicator:'none'
						})
				    },
				    forget:function(){
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				    	var login=plus.webview.open("forget.html","forget",{
							zindex:0,
							scrollIndicator:'none'
						})
				    },
				    btn:function(){
				    	var _this=this;
						ajax({ //登录
							url: "http://dsapi.ysd3g.com/api/login",
							dataType: "jsonp",
							data: {
								account:_this.phone,
								password:_this.pwd
							},
							success: function(res) {
								if(res.Error==false){
									var presonal=plus.webview.getWebviewById("presonal");
									presonal.reload(true);
									var User=JSON.stringify(res);//把Json格式的用户信息转换成字符串存放到变量里
									localStorage.setItem("user",User);//存放到localStroage里
									app.$toast("登录成功");
									plus.webview.close(plus.webview.currentWebview(),"slide-out-left");
								}else{
									app.$toast.fail(res.Msg);
								}
								console.log(res);
							}
						});
				    }
  				},
  				watch:{
  					phone(newPhone, oldPhone) {
  						if(!(/^1[34578]\d{9}$/.test(newPhone))){
  							this.msg="手机号格式错误";
  						}else{
  							this.msg="";
  						}
					},
					pwd(newPwd, oldPwd) {
  						if(!(/^(\w){6,16}$/.test(newPwd))){
  							this.pwd1="密码必须在6-16位之间";
  						}else{
  							this.pwd1="";
  						}
					},
  				}
			})
		</script>
	</body>
</html>